<template>
  <div class="panelsbox">
    <div class="leftpanels">
      <ul>
        <li v-for="(list, index) in tabslabel" @click="selectlist(index)" :key="index" :class="list.active?'active':''">
          {{list.label}}
        </li>
      </ul>
    </div>
    <div class="rightpanels">
      <ul>
        <li v-for="(tag, index) in tags" :key="index">
          <img :src="tag.image" alt="">
          <p>{{tag.label}}
            <van-icon name="add-o" size="18px" @click="addtocart($event,tag)" />
          </p>
        </li>
      </ul>
    </div>
    <div class="ball-wrap">
      <transition @before-enter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
        <div class="ball" v-if="ball.show">
          <div class="inner">
            <van-icon name="add-o" />
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      ball: {
        show: false,
        el: ''
      },
      tabslabel: [
        {
          label: '热门推荐',
          active: true,
        }, {
          label: '手机数码',
          active: false,
        }, {
          label: '家用电器',
          active: false,
        }, {
          label: '家用空调',
          active: false,
        }, {
          label: '电脑产品',
          active: false,
        },
        {
          label: '热门推荐',
          active: false,
        }, {
          label: '手机数码',
          active: false,
        }, {
          label: '家用电器',
          active: false,
        }, {
          label: '家用空调',
          active: false,
        }, {
          label: '电脑产品',
          active: false,
        },
        {
          label: '热门推荐',
          active: false,
        }, {
          label: '手机数码',
          active: false,
        }, {
          label: '家用电器',
          active: false,
        },
      ],
      tags: [

      ]
    };
  },

  methods: {
    addtocart (e, tag) {
      this.$store.commit('tocart', tag)
      //让我们小球显示出来
      this.ball.show = true
      //获取点击元素
      this.ball.el = e.target
    },
    selectlist (index) {
      this.tabslabel.forEach((val, ind) => {
        if (index == ind) {
          val.active = true
        } else {
          val.active = false
        }
      })
      this.getclassify(index)
    },
    async getclassify (index) {
      const result = await this.axios.get('/api/classify', { params: { type: index } })
      this.tags = result.data
    },
    beforeEnter (el) {
      //让小球移动到点击的位置
      //获取点击位置
      const dom = this.ball.el
      const rect = dom.getBoundingClientRect()//获取点击的dom的位置
      const x = rect.left - window.innerWidth * 0.7
      const y = -(window.innerHeight - rect.top)
      el.style.display = 'block'
      el.style.transform = `translate3d(0,${y}px,0)`
      const inner = el.querySelector('.inner')
      inner.style.transform = `translate3d(${x}px,0,0)`
    },
    enter (el, done) {
      //触发重绘
      document.body.offsetHeight
      //小球移动回到原点，就是购物车的位置
      el.style.transform = `translate3d(0,0,0)`
      const inner = el.querySelector('.inner')
      inner.style.transform = `translate3d(0,0,0)`
      //过渡完成后执行的事件
      el.addEventListener('transitionend', done)
    },
    afterEnter (el) {
      //结束隐藏小球
      this.ball.show = false
      el.style.display = 'none'
    }
  },
  created () {
    //获取默认的分类数据
    this.getclassify(0)
  },
  mounted () {
    //设置滚动盒子的高度
    const leftpanels = document.querySelector('.leftpanels')
    const rightpanels = document.querySelector('.rightpanels')
    const bodyheight = document.documentElement.clientHeight
    leftpanels.style.height = bodyheight - 50 + 'px'
    rightpanels.style.height = bodyheight - 50 + 'px'
  }
}
</script>
<style scoped>
.panelsbox {
  display: flex;
}
.leftpanels {
  width: 30%;
}
.leftpanels li {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #fff;
  color: #333;
  background: #f8f8f8;
  font-size: 14px;
}
.leftpanels .active {
  background: #fff;
  color: #e93b3d;
}
.rightpanels {
  width: 70%;
}
.rightpanels ul {
  display: flex;
  flex-wrap: wrap;
}
.rightpanels ul li {
  width: 50%;
  justify-content: center;
  align-items: center;
  font-size: 15px;
}
.rightpanels ul li img {
  width: 80px;
  height: 80px;
}

.ball-wrap .ball {
  position: fixed;
  left: 70%;
  bottom: 10px;
  z-index: 1003;
  color: red;
  transition: all 1s cubic-bezier(0.49, -0.29, 0.75, 0.41);
}
.ball-wrap .ball .inner {
  width: 16px;
  height: 16px;
  transition: all 1s linear;
}
</style>
